import {
  Collection,
  DatasetListItem,
  DatasetTypeEnum,
  GetGroupTreeList,
  MAX_NAME_LENGTH,
} from '@/common';
import ApiTable from './ApiTable';
import DeleteConfirmModal from '@/pages/datasets/components/DeleteConfirmModal';
import { useEffect, useRef, useState } from 'react';
import datasetService from '@/api/services/datasetService';
import { App, Button, Input, Modal, Space } from 'antd';
import { useSize } from 'ahooks';
import ApiDatasetTable from './ApiDatasetTable';
import { ApiDatasetEvent, ApiItem } from '@/types/api';
import { useContextSelector } from 'use-context-selector';
import { ApiManageContext } from '../context';
import { useParams } from '@/router/hooks';
import { useUserInfo } from '@/store/userStore';
interface Props {
  selectedItem: DatasetListItem | undefined;
  datasets: DatasetListItem[];
  isAdmin: boolean;
  isPermit: boolean;
  loading: boolean;
  groupId: string | undefined;
  managers: any;
  approves: any;
  total: number;
  pageSize: number;
  page: number;
  searchValue?: string;
  setSearchValue?: (value: string) => void;
  onItemClicked?: (item: DatasetListItem | undefined) => void;
  handlePageChange?: (page: number, pageSize: number) => void;
}

const ApiListTableMain = ({
  selectedItem,
  datasets,
  groupId,
  managers,
  approves,
  isAdmin,
  isPermit,
  loading,
  total,
  pageSize,
  page,
  searchValue,
  setSearchValue,
  onItemClicked,
  handlePageChange,
}: Props) => {
  const ref = useRef<HTMLDivElement>(null);
  const size = useSize(ref);
  const { appId = '' } = useParams() as { appId: string };
  const { username, _id } = useUserInfo();
  const { message } = App.useApp();

  const {
    event$,
    deleteModalVisible,
    setDeleteModalVisible,
  } = useContextSelector(ApiManageContext, (s) => s);

  useEffect(() => {
    console.log('deleteModalVisible===========', deleteModalVisible);
  }, [deleteModalVisible]);

  const handleDeleteConfirm = async () => {
    if (selectedItem) {
      await datasetService.datasetDelete({
        id: [selectedItem?.id] || [selectedItem?._id],
        reviewStatus: 'drop',
        app_id: appId,
      });
    }
    message.success('删除成功！');
    setDeleteModalVisible(false);
    onItemClicked && onItemClicked(undefined);
    event$?.emit(ApiDatasetEvent.REFRESHDATASET);
  };

  return (
    <div className="relative flex h-full flex-col gap-4 overflow-y-auto">
      <div
        ref={ref}
        className="flex-1 overflow-y-auto overflow-x-hidden bg-[#fff]"
        style={{
          maxHeight: 'calc(100% - 10px)',
        }}
      >
        {selectedItem && (
          <ApiTable
            selectedItem={selectedItem}
            isAdmin={isAdmin}
            isPermit={isPermit}
            parentSize={size ?? { width: 0, height: 0 }}
          />
        )}
        {!selectedItem && (
          <ApiDatasetTable
            loading={loading}
            datasets={datasets}
            groupId={groupId}
            managers={managers}
            approves={approves}
            isAdmin={isAdmin}
            isPermit={isPermit}
            parentSize={size ?? { width: 0, height: 0 }}
            onItemClicked={onItemClicked}
            handlePageChange={handlePageChange}
            total={total}
            pageSize={pageSize}
            page={page}
            searchValue={searchValue}
            setSearchValue={setSearchValue}
          />
        )}
        <DeleteConfirmModal
          visible={deleteModalVisible}
          text={`确定要删除数据接口集 ${selectedItem?.name} 吗？`}
          onCancel={() => {
            setDeleteModalVisible(false);
          }}
          onConfirm={handleDeleteConfirm}
        />
      </div>
    </div>
  );
};

export default ApiListTableMain;
